import { useState, useCallback, useEffect } from "react";
import Room from "./Room";
import "./CureRoom.scss";
import Window from "../items/Window";
import Cloud from "../items/Cloud";
import Clock from "../items/Clock";
import Board from "../items/Board";

const clouds = [
  {
    index: 0,
    text: "一朵云",
  },
  {
    index: 1,
    text: "一朵很白的云",
  },
  {
    index: 2,
    text: "一朵方块云",
  },
  {
    index: 3,
    text: "一朵小云",
  },
  {
    index: 4,
    text: "一朵代码云",
  },
  {
    index: 5,
    text: "一朵快速飘动的云",
  },
  {
    index: 6,
    text: "一朵云",
  },
  {
    index: 7,
    text: "一朵很白的云",
  },
  {
    index: 8,
    text: "一朵方块云",
  },
  {
    index: 9,
    text: "一朵小云",
  },
  {
    index: 10,
    text: "EC",
    status: "EilleenMemoryFromClouds",
  },
  {
    index: 11,
    text: "一朵快速飘动的云",
  },
];
// clock
const clockStyleOpt = {
  clockColor: "rgb(255, 216, 171)",
  bottomColor: "rgb(240, 197, 140)",
};
// window
const windowCode = [2,0,2,1,1,1,0,2];

const windowHoleColorAfterClick = [
  "white",
  "green",
  "orange",
  "yellow",
  "gray",
  "red",
];

function RoomMain(props) {
  const { handleText, Carousel, handleState, index, handleRoomIndex } = props;

  const findMemorys = useCallback(
    (state) => {
      setBSO((backgroundStyleOpt) => {
        return { ...backgroundStyleOpt, background: "black" };
      });
      setWSO((windowStyleOpt) => {
        return {
          ...windowStyleOpt,
          windowColor: "white",
          insideColor: "black",
          holeColor: ["white", "white", "white", "white", "white", "white"],
        };
      });
      setBDSO((boardStyleOpt) => {
        return {
          ...boardStyleOpt,
          background: "black",
        };
      });
      setTimeout(() => {
        handleState(state);
      }, 3000);
    },
    [handleState]
  );
  // clock
  const [time, setTime] = useState({
    hour: 8,
    mintue: 0,
  });
  // background
  const [backgroundStyleOpt, setBSO] = useState({
    background: "linear-gradient(rgb(255, 217, 200), rgb(255, 146, 96));",
  });
  // window
  const [winCode, setWinCode] = useState([]);

  const [windowStyleOpt, setWSO] = useState({
    windowColor: "rgb(241, 193, 154)",
    insideColor: "rgba(251, 251, 198, 0.719)",
    holeColor: [
      "rgb(241, 193, 154)",
      "rgb(241, 193, 154)",
      "rgb(241, 193, 154)",
      "rgb(241, 193, 154)",
      "rgb(241, 193, 154)",
      "rgb(241, 193, 154)",
    ],
    holeHeight: ["90%", "90%", "90%", "90%", "90%", "90%"],
  });

  const changeWindowHoleHeight = useCallback((key) => {
    setWSO((windowStyleOpt) => {
      windowStyleOpt.holeHeight[key] = "10%";
      return {
        ...windowStyleOpt,
      };
    });
    setTimeout(() => {
      setWSO((windowStyleOpt) => {
        windowStyleOpt.holeHeight[key] = "90%";
        return {
          ...windowStyleOpt,
        };
      });
    }, 1000);
  }, []);

  const changeWindowHoleColor = useCallback((key) => {
    if (key !== windowHoleColorAfterClick.length - 1) {
      setWinCode((winCode) => {
        return [...winCode, key];
      });
    } else {
      setWinCode([]);
    }

    setWSO((windowStyleOpt) => {
      windowStyleOpt.holeColor[key] = windowHoleColorAfterClick[key];
      return {
        ...windowStyleOpt,
      };
    });
    setTimeout(() => {
      setWSO((windowStyleOpt) => {
        windowStyleOpt.holeColor[key] = "rgb(241, 193, 154)";
        return {
          ...windowStyleOpt,
        };
      });
    }, 1000);
  }, []);

  useEffect(() => {
    console.log(winCode);
    if (winCode.length === windowCode.length) {
      if (winCode.join() === windowCode.join()) {
        findMemorys("CroalMemoryFromWindows");
      } else {
        changeWindowHoleColor(5);
      }
    }
  }, [winCode, findMemorys, changeWindowHoleColor]);

  // board
  const [boardStyleOpt, setBDSO] = useState({
    background: "rgb(251, 251, 198)",
  });

  // Carousel
  const handleCarouselChange = useCallback((e) => {
    handleRoomIndex(e, "CUREROOM");
  }, [handleRoomIndex]);

  return (
    <div
      className="cure-room"
      style={{ background: backgroundStyleOpt.background }}
    >
      <Carousel
        class="carousel"
        showStatus={false}
        infiniteLoop={true}
        selectedItem={index}
        onChange={handleCarouselChange}
      >
        <div class="background-pattern">
          {clouds.map((item, key) => {
            return (
              <div
                class={"cloud" + item.index}
                key={key}
                onClick={() => findMemorys(item.status)}
              >
                <Cloud handleText={handleText} text={item.text} />
              </div>
            );
          })}
        </div>
        <div className="room-side0">
          <div className="left-side">
            <Window
              handleText={handleText}
              text="一扇窗户"
              styleOpt={windowStyleOpt}
              handleHoleClick={changeWindowHoleColor}
            />
          </div>
          <div className="right-side">
            <div className="top">
              <div className="top-left"></div>
              <div className="top-right">
                <Clock
                  time={time}
                  text="当前的时间，看起来完全停止了"
                  handleText={handleText}
                  styleOpt={clockStyleOpt}
                />
              </div>
            </div>
            <div className="middle">
              <div className="middle-left"></div>
              <div className="middle-right"></div>
            </div>
            <div className="bottom">
              <div className="bottom-left"></div>
              <div className="bottom-right"></div>
            </div>
          </div>
        </div>
        <div className="room-side1">
          <div class="left-side"></div>
          <div class="middle-side">
            <div class="top"></div>
            <div class="middle">
              <Board
                handleText={handleText}
                styleOpt={boardStyleOpt}
                text={"这里贴着许多便签"}
                state={"CURETIPS"}
                handleState={handleState}
              />
            </div>
            <div class="bottom"></div>
          </div>
          <div class="right-side"></div>
        </div>
        <div className="room-side2">
          <div className="left-side"></div>
          <div className="middle-side"></div>
          <div className="right-side">
            <Window
              handleText={handleText}
              text="另一扇窗户，似乎遮挡着什么东西"
              styleOpt={windowStyleOpt}
              handleHoleClick={changeWindowHoleHeight}
              img="windowCodeRefer.png"
            />
          </div>
        </div>
        <div className="room-side3">3</div>
      </Carousel>
    </div>
  );
}

export default function CureRoom(props) {
  const { handleState, index, handleRoomIndex } = props;
  return (
    <Room
      RoomMain={RoomMain}
      handleState={handleState}
      index={index}
      handleRoomIndex={handleRoomIndex}
    />
  );
}
